<template>
  <div class="list">
    <Header></Header>
    <section>
      <div class="left wrapper">
        <ul>
          <li
            v-for="(item, index) in title"
            :key="index"
            @click="goScroll(index)"
            :class="currentIndex == index ? 'active' : ''"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="right">
        <ul class="aaa">
          <li class="bbb" v-for="(item, index) in listD" :key="index">
            <h5>{{ item.name }}</h5>
            <ul class="ccc">
              <li
                class="ddd"
                v-for="(ele, ind) in item.data[0].list"
                :key="ind"
              >
                <div class="img">
                  <img v-lazy="ele.imgUrl" alt="" />
                </div>
                <span>{{ ele.name }}</span>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </section>

    <Tabbar></Tabbar>
  </div>
</template>

<script>
import { Lazyload } from "mint-ui";
import Header from "@/components/List/Header.vue";
import Tabbar from "@/components/Tabbar.vue";
import http from "@/common/request";
import BetterScroll from "better-scroll";
export default {
  name: "List",
  data() {
    return {
      currentIndex: 0,
      listD: [],
      title: [],
      LBetterScroll: "",
      rBetterScroll: "",
      allHeight: [],
      scrollY: 0,
    };
  },
  components: {
    Tabbar,
    Header,
  },
  created() {
    this.getData();
  },
  methods: {
    // 点击左侧 右侧开始滚动
    //index是每个li对应的小标   同时也对应在allHeight中的高度
    //通过better-scroll的scrollTo方法进行右侧的滚动
    goScroll(index) {
      this.currentIndex = index;
      this.rBetterScroll.scrollTo(0, -this.allHeight[index], 500);
    },
    async getData() {
      let res = await http.$axios({ url: "/api/goods/list" });
      this.listD = res.data;
      res.data.forEach((element) => {
        this.title.push(element.name);
      });

      this.$nextTick(() => {
        // // 左侧滑动
        // this.LBetterScroll = new BetterScroll(".wrapper", {
        //   movable: true,
        //   zoom: true,
        //   click: true,
        //   probeType: 3,
        //   bounce:false
        // });
        // 右侧滑动
        this.rBetterScroll = new BetterScroll(".right", {
          disableTouch: false,
          movable: true,
          zoom: true,
          click: true,
          probeType: 3,
          bounce: false,
        });
        // 统计所有板块的高度值，并放入数组
        let height = 0;
        this.allHeight.push(height);
        let domList = document.getElementsByClassName("bbb");
        let arr = Array.from(domList);
        arr.forEach((item) => {
          height += item.clientHeight - 50;
          this.allHeight.push(height);
          // console.log(item.clientHeight);
        });
        // 右侧滚动触发scrollEnd事件  获得右侧滚动的y轴距离
        this.rBetterScroll.on("scrollEnd", (pos) => {
          this.scrollY = Math.abs(pos.y);
          //  console.log(this.scrollY);
          this.changeIndex();
        });
      });
    },
    //根据右侧滚动y轴的距离 计算出左侧的下标位置
    //使用findIndex方法 allHeight  y轴的距离大于当前item但是小于index+1位置的item
    changeIndex() {
      let ind = this.allHeight.findIndex((item, index) => {
        return this.scrollY >= item && this.scrollY < this.allHeight[index + 1];
      });
      this.currentIndex = ind;
    },
  },
};
</script>

<style scoped>
img[lazy="loading"] {
  /* width: 40px;
  height: 300px;
  margin: auto; */
  height: 80px;
  width: 80px;
  margin: auto;
  background: url("@/assets/images/lazyLoad.gif") no-repeat fixed center;
}
.list {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
section {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
.left {
  width: 25vw;
  background-color: #eee;
  font-size: 18px;
}
.left ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.left ul li {
  text-align: center;
  line-height: 60px;
  width: 100%;
}
.right {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
}
.aaa {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.bbb {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 5px;
}
.bbb h5 {
  padding: 15px 0;
}
.bbb .ccc {
  display: flex;
  flex-wrap: wrap;
  width: 75vw;
  justify-content: flex-start;
}
.bbb .ccc .ddd {
  display: flex;
  flex-direction: column;
  /* height: 110px; */
  margin: 0 5px;
  justify-content: center;
  align-items: center;
}
.ddd span {
  font-size: 15px;
}
.ddd img {
  height: 80px;
  width: 80px;
}
.ddd img .img {
  height: 100%;
  width: 100%;
}
.active {
  background-color: rgba(0, 0, 0, 0.3);
  transform: scale(0.9);
}
</style>